<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css"/>
    <script type="text/javascript" src="lib/layui/layui.js" media="all"></script>
    <script src="lib/layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="lib/css/admin.css" media="all">

</head>
<style>
    body {
        line-height: 24px;
        font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    }

    .header-demo {
        height: 60px;
        border-bottom: none;
    }

    .site-demo-title {
        position: fixed;
        left: 220px;
        right: 0;
        top: 65px;
    }

    body .layui-layout-admin .site-demo {
        bottom: 60px;
        padding: 0;
    }

    .layui-layout-admin .site-demo-body {
        top: 106px;
    }

    .footer {
        text-align: center;
        font-weight: 300;
        color: #666666;
    }

    #manager {
        color: white;
    }

    .layui-tab-item layui-show {
        height: 99%;
    }

    .layui-input {
        display: inline-block;
        width: 120px;
        height: 22px;
        line-height: 22px;
    }
</style>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header header header-demo">
        <span style="font-size: 30px;color: white;"><b>&nbsp;&nbsp;后台管理系统</b></span>
        <ul class="layui-nav layui-layout-right" lay-filter="header-right">
            <li class="layui-nav-item" lay-unselect>
                <a href="javascript:;">
                    <cite id="manager">管理员</cite>
                </a>

            </li>

        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree " lay-shrink="all" lay-filter="test" id="xuanhuan">


            </ul>
        </div>
    </div>

    <div class="layui-tab layui-tab-brief " lay-filter="demo" lay-allowClose="true">

        <ul class="layui-tab-title site-demo-title">
            <li class="layui-this" lay-id="111"><i class="layui-icon layui-icon-home"></i>首页</li>
        </ul>
        <div class="layui-body layui-tab-content site-demo site-demo-body"
             style="height: 80%;width:88%;padding-left: 20px;padding-top: 10px">
            <div class="layui-tab-item layui-show">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">

                        </div>
                        <div class="layui-card-body">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-dataview">
                                <div carousel-item id="LAY-index-dataview1">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">

                        </div>
                        <div class="layui-card-body">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-dataview">
                                <div carousel-item id="LAY-index-dataview2">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-footer footer footer-demo">
        后台管理系统
    </div>

</div>
<script>

    function FrameWH() {
        var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
        $("iframe").css("height", h + "px");
    }


    $(window).resize(function () {
        FrameWH();
    })

    /*<![CDATA[*/
    function logout() {
        layer.confirm('您确定要退出系统吗？', {
            btn: ['确定', '取消']
        }, function () {
            window.location.href = "/logout";
        });
    }

    //echarts数据
    var summary_map = new Map();
    var trend_map = new Map();
    var summary_days = 15, trend_days = 15;
    var begin_date1 = "", end_date1 = "", begin_date2 = "", end_date2 = "";
    var elemDataView1, elemDataView2, renderDataView1, renderDataView2;


    layui.config({
        base: '../'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['element', 'layer', 'index', 'console', 'carousel', 'echarts', 'laydate'], function () {
        var element = layui.element;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var carousel = layui.carousel;
        var echarts = layui.echarts;
        var admin = layui.admin;
        var carouselIndex1 = 0, carouselIndex2 = 0;
        //触发事件
        var active = {
            tabAdd: function (url, id, name) {
                element.tabAdd('demo', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="yes" frameborder="0" src="/' + url + '" style="width:99%;height:99%;"></iframe>',
                    id: id
                });
                FrameWH();//计算框架高度
                // CustomRightClick(id);
                // FrameWH();//计算iframe层的大小
            },

            tabChange: function (id) {
                element.tabChange('demo', id);
            },
            tabDelete: function (id) {
                element.tabDelete('demo', id);
            }
        };


        //当点击site-demo-active属性的标签时，即左侧菜单栏中的内容，触发事件
        $(".site-demo-active").on('click', function () {
            console.log("asdasdas");
            var dataid = $(this);


            //这时候要判断右侧的.layui-tab-title属性下的lay-id的li的数目，已经打开的tab的数量
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //比零小，则直接打开新的tab项
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                //判断该tab项是否以及存在
                var isData = false;//初始化一个标志，为false说明未打开该tab项
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    if ($(this).attr("lay-id") === dataid.attr("data-id")) {
                        isData = true;
                    }
                });
                if (isData === false) {
                    //标志为false，新增一个tab
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            active.tabChange(dataid.attr("data-id"));
        });


        carousel.on('change(LAY-index-dataview1)', function (obj) {
            renderDataView1(carouselIndex1 = obj.index);
        });
        carousel.on('change(LAY-index-dataview2)', function (obj) {
            renderDataView2(carouselIndex2 = obj.index);
        });

        /****/
        //监听侧边伸缩
        layui.admin.on('side', function () {
            setTimeout(function () {
                renderDataView1(carouselIndex1);
                renderDataView2(carouselIndex2);
            }, 300);
        });

        //监听路由
        layui.admin.on('hash(tab)', function () {
            layui.router().path.join('') || renderDataView1(carouselIndex1);
            layui.router().path.join('') || renderDataView2(carouselIndex2);
        });


    });

    $.post("/backstage/selectAlManageJurisdiction",
        function (result) {
            if (result.status == 200) {

                PaintingForm(result.data);
            }
        });

    function PaintingForm(e) {
        var value = '';
        for (var i = 0; i < e.length; i++) {

            value += ' <li class="layui-nav-item ">\n' +
                '                <a href="javascript:;">' + e[i].mjName + '</a>\n' +
                '                <dl class="layui-nav-child">\n' +
                '                <dd><a href="#" class="site-demo-active" data-url="' + e[i].mjUrl + '" data-id="' + e[i].mjName + '" data-title="' + e[i].mjName + '">\n' +
                '                <i class="layui-icon layui-icon-read"></i>\n' +
                '               ' + e[i].mjName + '</a>\n' +
                '                </dd>\n' +
                '                </dl>\n' +
                '                </li>'
        }
        console.log(value);
        $('#xuanhuan').html(value);
    }

</script>
</body>
</html>